<style lang="scss">
  @import "~@/styles/base";

  .page-user {
    .user-info {
      padding-top: rpx(23);
      .user-logo {
        position: relative;
        margin-bottom: rpx(38);
        margin-left: auto;
        margin-right: auto;
        width: rpx(150);
        height: rpx(150);
        background: center no-repeat;
        background-size: contain;
        background-color: #fff;
        border-radius: 50%;
        .icon-wrap {
          position: absolute;
          bottom: 0;
          right: 0;
          width: rpx(62);
          height: rpx(62);
          background-color: $main-color;
          border-radius: 50%;
          .icon {
            @include middle-center();
            width: rpx(32);
            height: rpx(25);
          }
        }
      }
      .tip {
        padding-bottom: rpx(30);
        color: $light-black;
        font-size: rpx(24);
        line-height: rpx(40);
        text-align: center;
      }
    }
    .info-list {
      padding-left: rpx(30);
      padding-right: rpx(30);
      margin-top: rpx(15);
      background-color: #fff;
      border-radius: rpx(10);
      .info {
        position: relative;
        height: rpx(100);
        line-height: rpx(100);
        font-size: rpx(28);
        color: $black;
        border-bottom: rpx(1) solid #dbe5f0;
        &:last-child {
          border-bottom: none;
        }
        .icon-right {
          @include middle-center-y();
          right: 0;
          width: rpx(16);
          height: rpx(28);
        }
        .form-control, .picker {
          @include middle-center-y();
          right: rpx(50);
          width: rpx(500);
          height: rpx(100);
          line-height: rpx(100);
          font-size: rpx(28);
          color: $light-black;
          text-align: right;
        }
        .picker {
          right: 0;
          padding-right: rpx(50);
        }
      }
    }
    .btn {
      margin-top: rpx(100);
    }
  }
</style>
<template>
  <div class="page page-user">
    <div class="user-info">
      <div class="user-logo">
        <div class="icon-wrap"><img class="icon" src="/static/img/setting/camera.png"></div>
      </div>
      <div class="tip">点击上传修改头像</div>
    </div>
    <ul class="info-list">
      <li class="info">
        姓名
        <input class="form-control" type="text" placeholder="请输入姓名">
        <!--<img class="icon-right" src="/static/img/common/arrow.png">-->
      </li>
      <li class="info">
        性别
        <picker mode="selector" :range="sexList" range-key="title" @change="changeSex" :value="userInfo.sex">
          <div class="picker">
            {{userInfo.sex === 1 ? "男":"女"}}
            <img class="icon-right" src="/static/img/common/arrow.png">
          </div>
        </picker>
      </li>
      <li class="info">
        年龄
        <picker mode="selector" :range="ageList" range-key="title" @change="changeAge" :value="userInfo.age">
          <div class="picker">
            {{userInfo.age}}岁
            <img class="icon-right" src="/static/img/common/arrow.png">
          </div>
        </picker>
      </li>
    </ul>
    <ul class="info-list">
      <li class="info">
        地区
        <img class="icon-right" src="/static/img/common/arrow.png">
      </li>
      <li class="info">
        学校
        <input class="form-control" type="text" placeholder="请输入学校">
        <!--<img class="icon-right" src="/static/img/common/arrow.png">-->
      </li>
      <li class="info">
        年级
        <img class="icon-right" src="/static/img/common/arrow.png">
      </li>
    </ul>
    <div class="btn">保存</div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {
          sex: 1,
          age: 8,
        },
        sexList: [
          {
            id: 1,
            title: "男"
          }, {
            id: 2,
            title: "女"
          }
        ],
        ageList: []
      };
    },
    components: {},
    methods: {
      changeSex(e) {
        this.userInfo.sex = this.sexList[ e.mp.detail.value ].id;
      },
      changeAge(e){
        this.userInfo.age = this.ageList[ e.mp.detail.value ].id;
      }
    },
    async onLoad() {
      for (let i = 3; i < 20; i++) {
        this.ageList.push({
          id: i,
          title: `${i}岁`,
        })
      }
      if (!Store.getters.is_login) {
        await Store.dispatch('login');
      }
      const userInfo = Store.state.user.userInfo.user;
      console.info(userInfo)
    }
  };
</script>
